<template>
    <!-- 查询条件 -->
    <div>
        姓名:<el-input v-model="page.FirstName" style="width: 150px"></el-input>&emsp;
        部门： <el-cascader v-model="value" :props="props" :options="options2" @change="handleChange2"
            style="width: 150px" />

        员工状态:&emsp;<el-select v-model="page.Department" placeholder="--请选择--" style="width: 100px">
            <el-option label="适用员工" :value="1" />
            <el-option label="在职员工" :value="2" />
            <el-option label="实习员工" :value="3" />
            <el-option label="临时工人" :value="4" />
            <el-option label="调至员工" :value="5" />
            <el-option label="专家顾问" :value="6" />
            <el-option label="返聘人员" :value="7" />
        </el-select>
        &emsp;&emsp;<el-button type="danger" @click="GetRouter">搜索</el-button>
        <br />
        <el-button :icon="Plus" type="success" @click="router.push('/UserAddView')">新增</el-button> &emsp;&emsp;
        <el-button :icon="Bottom" type="primary" @click="dialogFormVisible = true">导入</el-button>
    </div>
    <!-- 列表显示 -->
    <el-table :header-cell-style="{ height: '100px', fontSize: '15px',color:'black' , backgroundColor: 'antiquewhite' }" :data="tableData" border style="width: 100%">
        <el-table-column prop="employeeId" label="员工编号" />
        <el-table-column prop="firstName" label="姓名" />
        <el-table-column prop="department" label="部门">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="联系方式" />
        <el-table-column prop="employmentStatus" label="员工状态" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button v-if="scope.row.deletes == false" link type="primary" size="small" @click="">
                    删除
                </el-button>
                <el-button :icon="Search" type="primary" size="small">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    <!-- 对话框导入 -->
    <el-dialog v-model="dialogFormVisible" width="500">

    </el-dialog>
</template>

<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  Setting,
  SuccessFilled,
  Close,Bottom
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
import { fa } from 'element-plus/es/locales.mjs';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();
const BuArror = ["", "", "", "", "", ""]
onMounted(() => {
    GetRouter()
    getOptions2()
})


const page = reactive({
    FirstName: '',
    Department: '',
    EmploymentStatus: 0,
    pageIndex: 1,
    pageSize: 5,
    totalPage: 1,
    totalCount: 1,
});

const handleSizeChange = (val: any) => {
    console.log(val)
    page.pageSize = val;
    GetRouter();

};

const handleCurrentChange = (val: any) => {
    page.pageIndex = val;
    GetRouter();
};

const dialogFormVisible = ref(false);
const ruleForm = reactive({

});

const radio = ref(1);

const formSize = ref<ComponentSize>('default');
const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
    name: [{ required: true, message: '必填', trigger: 'blur' }],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change'
        }
    ]
});
//弹框按钮
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post('http://localhost:5008/api/RBACs/RolesAdd', ruleForm).then((res) => {
                if (res.data.code == 0) {
                    dialogFormVisible.value = false
                    console.log(res.data.message)
                    GetRouter()
                }
                else {
                    console.log(res.data.message)
                }
            })
        } else {
            console.log('error submit!', fields);
        }
    });
};

const tableData = ref([]);
const GetRouter = () => {
    axios.get('http://localhost:5008/api/RBACs/EmployeeList', {
        params: {
            FirstName: page.FirstName,
            Department: page.Department || 0,
            EmploymentStatus: page.EmploymentStatus || 0,
            pageIndex: page.pageIndex,
            pageSize: page.pageSize
        }
    }).then((res) => {
        if (res.data.code == 1) {
            tableData.value = res.data.data
            console.log(res.data.messege)
            page.totalPage = res.data.totalPage
            page.totalCount = res.data.totalCount
        }
        else {
            ElMessage.error(res.data.messege)
        }
    })
}
//部门级联
const value = ref([])

const props = {
    expandTrigger: 'hover' as const,
}

const handleChange2 = (value: any) => {

    page.Department = value[value.length - 1]
    console.log(page.Department
    )
}
const options2 = ref([])
const getOptions2 = () => {
    axios.get("http://localhost:5039/api/Depart/SearchDepartmentTree").then((res) => {
        console.log(res.data.data)
        options2.value = res.data.data
    })
}




</script>

<style scoped></style>
